<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>Scatter Plot Matrix</title>
    <link rel="stylesheet" href="style.css" />
<body bgcolor="#f5f5f5">

<center>
    <div id="container" style="width:1100px">
        <div id="header" style="background-color:#ff7d90;">
            <h1 style="margin-bottom:0;">
                <center>
                    <font color = "green">
                        <p> Scatter Plot  </p>
                    </font>
                </center>
            </h1>
        </div>
</center>

<script src="d3.v3.min.js"></script>
<script src="GeoLib2.js"></script>
<script src="InteractionLib.js"></script>
<script src="Data.js"></script>
<script>
    d3.csv("fla.csv", function (csv) {
        var traits = keys_of_objects(csv);
        var no_of_cols = traits.length-1;
        var plot = Main_Bound_region;

        var padding=60;
        plot.svg_height = 1050//plot.g_height * no_of_cols +plot.g_height;
        plot.svg_width = 1050//plot.g_width * no_of_cols + plot.g_width;
        plot.g_width=plot.svg_width/(no_of_cols)-padding-5;
        plot.g_height=plot.svg_height/(no_of_cols)-padding-5;

        plot.SVG("body").call(Interaction.Zoom(1,8,'g1'));
        plot.G("svg");
        plot.G("g0").attr("transform", "translate("+padding+",25)");

        var color = d3.scale.category10();

        var id=2;
        var x_pad= 0,y_pad=0;
        for(var col1= 0;col1<no_of_cols;col1++){
            for(var col2=no_of_cols-1;col2>-1;col2--){

                plot.G('g1').transition().attr("transform", "translate(" + x_pad + "," + y_pad + ")")
                        .duration(2000) // this is 1s
                        .delay(100);//.call(brush);     // this is 0.1s;


                var mydata=[],square=[];
                var vcol1 = [],vcol2=[],vspecifes=[];
                //console.log(csv);
                values_of_key(csv,traits[col1],vcol1);
                values_of_key(csv,traits[col2],vcol2);

                values_of_key(csv,traits[4],vspecifes);


                var width=d3.select("#g"+id).attr("width");
                var height=d3.select("#g"+id).attr("height");
                var scalex=Geo_Primitives.Scale(csv,traits[col1],traits[col1],0,0,width,0,'x');
                var scaley=Geo_Primitives.Scale(csv,traits[col2],traits[col2],0,0,height,0,'y');

                for(var i=0;i<vcol1.length;i++) {
                    Generate_DataObject_Circle(mydata,scalex(vcol1[i]),scaley(vcol2[i]),2.5,"black",1,color(vspecifes[i]));

                }

                Geo_Primitives.Draw_Axis(csv,traits[col2],traits[col1],0,0,'v',5,'g'+id).attr("class","x axis");
                Geo_Primitives.Label(traits[col2],'x','g'+id);

                square=[{
                    x:0,
                    y:0,
                    width:plot.g_width,
                    height:plot.g_height,
                    rx:0,
                    ry:0,
                    fill:"white",
                    stroke:"black",
                    stroke_width:2,
                    fill_opacity:0
                }]
                Geo_Primitives.DrawRect(square,"g"+id);
                Geo_Primitives.Draw_Axis(csv,traits[col1],traits[col1],0,0,'h',5,'g'+id).attr("class","y axis");
                Geo_Primitives.Label(traits[col1],'y','g'+id);
                Geo_Primitives.DrawCircle(mydata,'g'+id);

                id++;
                x_pad+=plot.g_width+padding;
            }
            y_pad+=plot.g_height+padding;x_pad=0;
        }





    });



</script>